{% extends "main/base.html" %}
{% load static i18n %}
{% block title %}{% trans '更新设备组装' %}{% endblock %}
{% block this_css %}
<link type="text/css" href="{% static 'flatlab/css/bootstrap-select.min.css' %}" rel="stylesheet">
<link type="text/css" href="{% static 'flatlab/assets/jquery-multi-select/css/multi-select.css' %}" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="row">
    {% if object.created_by_id == request.user.pk or request.user.is_staff or request.user.pk in object.cooperators %}
    <aside class="profile-nav col-lg-3 alt green-border">
        <section class="panel">
            <div class="user-heading alt green-bg">
                <h1>{{ object.assembly_name }}</h1>
                {% if perms.main.view_equipment_basic_price %}<p>{% trans '部件成本' %}: {{ object.total_value }}</p>{% endif %}
            </div>
            <ul class="nav nav-pills nav-stacked">
                <li><a href="{% url 'main:equipment_assembly_detail' object.pk %}"><i class="fa fa-gear"></i> {% trans '组装详情' %} </a></li>
                <li class="active"><a href=""> <i class="fa fa-edit"></i> {% trans '编辑资料' %}  </a></li>
                {% if perms.main.add_assemblyitem %}{% if object %}<li><a href="{% url 'main:assembly_item_create' %}?a={{ object.pk }}&next={% url 'main:equipment_assembly_detail' object.pk %}"> <i class="fa fa-plus"></i> {% trans '添加部件' %}  </a></li>{% endif %}{% endif %}
            </ul>
        </section>
    </aside>
    <aside class="profile-info col-lg-9">
        <section class="panel">
            <div class="panel-heading">
                <h4 class="heading">{% trans '主设备名称' %}: <a href="{% url 'main:equipment_detail' object.equipment.pk %}">{{ object.equipment.equipment_cn|default_if_none:'N/A' }}/{{ object.equipment.equipment_en|default_if_none:'' }}</a></h4>
            </div>
            <div class="panel-body bio-graph-info">
                <div class="row">
                    <div class="bio-row">
                        <p><span>{% trans '备注' %}: </span>{{ object.notes }}</p>
                    </div>
                </div>
            </div>
        </section>
        {% if object.created_by_id == request.user.pk or request.user.is_staff %}
        <section class="panel">
            <header class="panel-heading">
                {% trans "编辑组件" %} {% if form.errors %}<p>{% trans "您提交的数据有误,请认真检查!" %}</p>{% endif %}{{ form.non_field_errors }}
            </header>
            <div class="panel-body">
                <form method="post" class="form-horizontal">{% csrf_token %}
                    <div class="form-group">
                        <div class="col-lg-2">{{ form.assembly_name.label_tag }}</div>
                        <div class="col-lg-10">{{ form.assembly_name }}{{ form.assembly_name.errors }}</div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-2">{{ form.equipment.label_tag }}</div>
                        <div class="col-lg-10">{{ form.equipment }}{{ form.equipment.errors }}</div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-2">{{ form.is_confirmed.label_tag }}</div>
                        <div class="col-lg-4">
                            <div class="switch switch-square"
                                data-on-label="<i class=' fa fa-check'></i>"
                                data-off-label="<i class='fa fa-times'></i>">
                                {{ form.is_confirmed }}
                            </div>{{ form.is_confirmed.errors }}
                        </div>
                        <div class="col-lg-2">{{ form.is_active.label_tag }}</div>
                        <div class="col-lg-4">
                            <div class="switch switch-square"
                                data-on-label="<i class=' fa fa-check'></i>"
                                data-off-label="<i class='fa fa-times'></i>">
                                {{ form.is_active }}
                            </div>{{ form.is_active.errors }}
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-2">{{ form.cooperators.label_tag }}</div>
                        <div class="col-lg-10">{{ form.cooperators }}{{ form.cooperators.errors }}</div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-2">{{ form.notes.label_tag }}</div>
                        <div class="col-lg-10">{{ form.notes }}{{ form.notes.errors }}</div>
                    </div>
                    <div class="form-group" align="right">
                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-primary">{% trans "提交" %}</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        {% endif %}
    </aside>
    {% endif %}
</div>
{% endblock %}
{% block this_js %}
<script type="text/javascript" src="{% static 'flatlab/js/bootstrap-select.min.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/js/bootstrap-switch.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/assets/jquery-multi-select/js/jquery.multi-select.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/assets/jquery-multi-select/js/jquery.quicksearch.js' %}"></script>
<script>
    $('#id_cooperators').multiSelect({
        selectableHeader: "<div>可选同事</div><input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        selectionHeader: "<div>选中的同事</div><input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        afterInit: function (ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function () {
            this.qs1.cache();
            this.qs2.cache();
        }
    });
</script>
{% endblock %}